<!--
 * @Description: 
 * @Author: Zhang_xx
 * @Date: 2024-08-16 15:55:38
 * @LastEditors: Zhang_xx
 * @LastEditTime: 2025-02-20 17:45:45
-->
<template>
  <div>  
    <h1>请选择您的兴趣</h1>  
    <MultiSelectBox  
      :options="interestOptions"  
      v-model="selectedInterests"  
    />  
    <p>您选择的兴趣: {{ selectedInterests.join(', ') }}</p>  
  </div>
</template>

<script setup lang='ts'>
import {ref,reactive} from 'vue'
import MultiSelectBox from '../components/allComponents/checkBox.vue';  
const selectedInterests = ref([])
const interestOptions = reactive([
{ label: '音乐', title:'test01', value: 'music' },  
{ label: '艺术',title:'test01', value: 'art' },  
{ label: '运动',title:'test01', value: 'sports' },  
{ label: '科技',title:'test01', value: 'technology' }, 
])

</script>

<style lang='scss' scoped>

</style>